<template>
  <div :class="['check-out-init',{'check-out':init}]">
    <img alt="Vue logo" src="../assets/logo.png" height="80pt">
    <h1>退房服务</h1>

    <div id="check-out-info" class="check-out-info">
      <img src="../assets/blank.png" width="15vw">
      <div class="info-input-view">
      <br>
      <div id="room-number-div" class="room-div">
        <i>在此输入房间号码：</i>
        <el-input v-model="sendMessage.inputRoomNumber"></el-input>
      </div>
      <br><br><br><br>
      <div id="input-identification" class="room-div">
        <i>输入身份证号码：</i>
        <el-input v-model="sendMessage.inputIdentification"></el-input>
      </div>
      <br><br><br><br>
      <div id="room-pleased-div" class="room-div">
        <i>请评价本次居住体验：</i>
        <el-radio-group id="room-pleased" v-model="sendMessage.radioPleased">
          <el-radio value="pleased-1" border>良好</el-radio>
          <el-radio value="pleased-2" border>不错</el-radio>
          <el-radio value="pleased-3" border>普通</el-radio>
          <el-radio value="pleased-4" border>较差</el-radio>
          <el-radio value="pleased-5" border>很差</el-radio>
        </el-radio-group>
      </div>
      <br><br><br>
    </div>
    <img src="../assets/blank.png" width="15vw">
    </div>

    <div id="confirm-button">
      <br>
      <el-button type="success" @click="this.clearInput">重置输入</el-button>
      <el-button type="success" @click="this.sendCheckOutInfo">确认提交</el-button>
    </div>
  </div>
</template>

<script>
import { ElRadioGroup } from 'element-plus';
import { ElRadio } from 'element-plus';
import { ElInput } from 'element-plus';
import { ElButton } from 'element-plus';
import axios from 'axios';

export default {
  name: 'CheckOutView',
  components: {
    ElRadioGroup,
    ElRadio,
    ElInput,
    ElButton,
  },
  mounted(){
    //通过设定延迟时间，实现跳出本页面的效果
    setTimeout(() => {
      this.init=true;
    }, 10);
  },
  data(){
    return{
      sendMessage:{
        // type:'4',
        radioPleased:"default",
        inputRoomNumber: "",
        inputIdentification:"",
      },
      //控制本页面初始化跳出的效果
      init:false,
    }
  },
  methods:{
    //发送预定房间的消息
    sendCheckOutInfo(){
      if(this.sendMessage.inputIdentification.length!=18)
        alert("请输入正确格式的身份证号码")
      else{
        console.log(this.sendMessage);

        this.$store.dispatch('sendMessage', {
          text:"退房请求已发送，正在处理中...",
          receiver:true,
          type:"default",
        })
        //跳回chat界面
        this.$router.push('/');
        
        console.log("output: --------"+(this.sendMessage.inputRoomNumber))
        
        //传送消息在此实现:
        let url="http://localhost:8080/api/checkout";
        axios.get(url,{params:{roomNumber:this.sendMessage.inputRoomNumber}})
          .then(result=>{
            console.log('received check out Msg from java');
            this.$store.dispatch('sendMessage',{
              text:result.data.message,
              receiver:true,
              type:"default",
            })
          })
          .catch(err=>{
            console.log(err);
          })
        
      }
    },
    clearInput(){
      this.sendMessage.radioPleased="default";
      this.sendMessage.inputRoomNumber="",
      this.inputIdentification="";
    },

    //以下函数皆为debug函数
    changeRadioPleased(){
      console.log("radio chosen: "+this.sendMessage.radioPleased);
    },
  }
}
</script>

<style scoped>
.check-out-init{
  position: relative;
  width: 60vw;
  left: -60%;
  transform: translate(-40%,0%);
  transition: top 0.5s, left 0.5s, bottom 0.5s, right 0.5s;
  z-index: 1;/*覆盖优先度 */
}

.check-out{
  position: relative;
  width: 75vw;
  left: 30vw;
  z-index: 1;/*覆盖优先度 */
}

.el-input{
  width: 40vw;
}

.el-button{
  width: 20vw;
  max-width: 120pt;
  right: 0cap;
}

.room-div{
  float:left;
  text-align: left;
}

.check-out-info{
  display: flex;
  border: 1pt solid #aaaaaa;
  /* border-bottom-style: dotted; */
}

</style>

<style>
i{
  margin-right: 20pt;
}
</style>